<ui:composition template="/WEB-INF/template_page.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:b="http://bootsfaces.net/ui">

	<ui:define name="title">
        MeteoCal - Home
    </ui:define>

	<ui:define name="content">
		<div class="jumbotron col-md-6 col-md-offset-1">
			<h1>Welcome on MeteoCal !</h1>

			<br />

			<p>
				MeteoCal is a weather based event organizer platform, you can
				meet with your friends and invite them to your events, or even
				better, you can get invited to a lot of events! When an event is
				outdoors, MeteoCal will advise you the weather forecast for the
				place of the event for you to be ready to enjoy it completely!
			</p>
			
			<br/>

			<p>
				It is really simple, you just have to follow three steps:
			</p>
			
			<div class="row">
				<div class="col-xs-4">
         				<img class="index-image-left img-thumbnail" src="#{request.contextPath}/imgs/index1.jpg" />
				</div>
				
				<div class="col-xs-4">
         				<img class="index-image-left img-thumbnail" src="#{request.contextPath}/imgs/index2.jpg" />
				</div>
				
				<div class="col-xs-4">
         				<img class="index-image-left img-thumbnail" src="#{request.contextPath}/imgs/index3.jpg" />
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-4">
       				<p class="text-center">
       					1 - Create an event
       				</p>
				</div>
				
				<div class="col-xs-4">
         			<p class="text-center">
         				2 - Check the weather
         			</p>         				
				</div>
				
				<div class="col-xs-4">
         			<p class="text-center">
         				3 - Enjoy
         			</p>
				</div>
			</div>
		</div>
		
		<div class="col-md-offset-1 col-md-3">
			<h:form class="form-signin">
				<div class="page-header">
					<h2>Sign In</h2>
				</div>
				
				<br/>
				
				<label for="inputEmail" class="sr-only">Email address</label>
				<b:inputText type="email" id="inputEmail" class="form-control input-lg" placeholder="Email address" required="required" value="#{loginBean.username}" />
				
				<label for="inputPassword" class="sr-only">Password</label>
				<b:inputSecret type="password" id="inputPassword" class="form-control input-lg" placeholder="Password" required="required" value="#{loginBean.password}" />
				
            	<h:messages  style="color: red"/>
				
				<br/>
				
				<b:commandButton class="btn btn-lg btn-success btn-block" type="submit" action="#{loginBean.login()}" value="Login" ajax="true" update="@all"/>
				<a class="btn btn-lg btn-primary btn-block" href="#{request.contextPath}/register.xhtml">Register</a>
			</h:form>
		</div>
	
	</ui:define>
</ui:composition>